<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
</head>
<body>

<ul>
    <li><a href="#">火星</a></li>
    <li><a href="#">地球</a></li>
    <li><a href="#">土星</a></li>
    <li><a href="#">水星</a></li>
</ul>

<div class="content">
    <h1>最后一只狼</h1>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
    <p>来了一只狼</p>
</div>
<style>
    ul{
        list-style-type: none;
        padding: 0;
        margin:0;
        position: fixed;
        top:0;
        left:0;
        height: 100vh;
        background-color: darkgray;
    }
    li a{
        display: block;
        width: 500px;

        font-size: 100px;
        text-decoration: none;
        color: black;
    }
    a:hover{
        background-color: grey;
        color:white;
    }
    li:first-child a{
        background-color: green;
        color:white;
    }
    a{

        text-align: center;
    }
    .content{
        margin-left: 520px;
    }



</style>
</body>
</html>
